<template>
  <div class="top">
    <span><a href="#/">首页</a></span>
    <a href="#"><span>河北</span></a>
    <ul>
      <li class="l1" v-show="!login"><a href="#/login">登录</a></li>
      <li class="l11" v-show="login" @mouseover="user_top=true" @mouseleave="user_top=false"><a href="#/userUpdate">{{user.name}}</a>
      </li>
      <li class="l2"><a href="javascript:void(0)" @click="toOrder">我的订单</a></li>
      <li class="l3"><a href="#">我的京东</a></li>
      <li class="l4"><a href="#">京东会员</a></li>
      <li class="l5"><a href="#">企业采购</a></li>
      <li class="l6"><em>客户服务</em></li>
      <li class="l7"><em>网站导航</em></li>
      <li class="l8"><em>手机京东</em></li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "Top",
    data() {
      return {
        user_top: false,
        login: false,
        user: {}
      }
    },
    methods:{
      toOrder(){
        if (!this.login){
          if (!window.confirm("您未登录,前往登录吗?")){
            return
          }
          this.$router.push('/login')
        }else {
          this.$router.push('/order')
        }
      }
    },
    created() {
      const user = sessionStorage.getItem('user');
      if (user != null) {
        this.user = JSON.parse(user)
        this.login = true
      }
    },
    mounted() {
      this.$msgBus.$on('loginFlag', (flag) => {
        this.login = flag;
      })
    },
  }
</script>

<style scoped>
  .top {
    background-color: #e3e4e5;
    width: 1265px;
    height: 31px;
  }

  .top span {
    float: left;
    margin-left: 20px;
    width: 58px;
    height: 30px;
    font-size: 12px;
    line-height: 30px;
  }

  .top ul {
    float: left;
    margin-left: 400px;
    line-height: 30px;
  }

  .top ul li {
    list-style-type: none;
    float: left;
    font-size: 12px;
    color: #999999;
  }

  .top ul .l11:hover {
    background-color: white;
  }

  .top ul li a {
    color: #999999;
  }

  .top ul li a:hover {
    color: red;
  }

  .top ul li em {
    padding: 0 15px;
    border-right: 1px solid;
  }

  .top ul li a {
    padding: 0 15px;
    border-right: 1px solid;
  }

  .top ul .l8 em {
    border-right: 0px;
  }
</style>
